<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
	<style>
	img {border: none;}

	.box {
		width:560px; 
		height:300px;
		position: relative;
		margin: 20px auto;
	}

	.box ul li {
		width: 560px;
		height: 300px;
		list-style: none;
		position: absolute;
		left: 0;
		top: 0;
		display: none;
	}

	.box ul li:nth-child(1) {
		display: block;
	}
	img {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 10;
	}

	.box a#pre {
		width: 50px;
		height: 50px;
		font-size: 30px;
		line-height: 50px;
		text-align: center;
		background: white;
		position: absolute;
		left: 10px;
		top: 50%;
		margin-top: -25px;
		z-index: 100;
		border-radius: 50%;
		text-decoration: none;
	}	

	.box a#next {
		width: 50px;
		height: 50px;
		font-size: 30px;
		line-height: 50px;
		text-align: center;
		background: white;
		position: absolute;
		right: 10px;
		top: 50%;
		margin-top: -25px;
		z-index: 100;
		border-radius: 50%;
		text-decoration: none;
	}

	.box div.number {
		position: absolute;
		right: 50px;
		bottom: 10px;
		z-index: 100;
	}
	.box div.number span {
		float: left;
		width: 16px;
		height: 16px;
		text-align: center;
		line-height: 16px;
		background: rgba(255,255,255,0.6);
		font-size: 12px;
		border-radius: 50px;
		cursor: pointer;
	}

	.box div.number span:nth-child(1) {
		background: red;
	}
	</style>
 </head>
 <body>
  <div class="box">
	  <!-- 图片 -->
	  <ul>
		 <li><a href='#'><img src='image/1.jpg'/></a></li>
		 <li><a href='#'><img src='image/2.jpg'/></a></li>
		 <li><a href='#'><img src='image/3.jpg'/></a></li>
		 <li><a href='#'><img src='image/4.jpg'/></a></li>
		 <li><a href='#'><img src='image/5.jpg'/></a></li>
	  </ul>
	  <!-- 两边按钮 -->
	  <a href="javascript:" id="pre">&lt;</a>
	  <a href="javascript:" id="next">&gt;</a>
	  <!-- 小圆圈 -->
	  <div class="number" id="number">
		 <span>1</span>
		 <span>2</span>
		 <span>3</span>
		 <span>4</span>
		 <span>5</span>
	  </div>
  </div>
 </body>
</html>
<script>
	var oNext = document.getElementById('next');
	var oPre = document.getElementById('pre');
	var aLi = document.getElementsByTagName('li');
	var aNum = document.getElementById('number').getElementsByTagName('span');
	//console.log(oNext);
	//console.log(aNum);
	//事件监听
	var count=0;
	//下一张
	oNext.onclick = function(){
		for (var a=0;a<=aLi.length-1 ;a++ )
		{
			aLi[a].style.display = 'none';
			aNum[a].style.background = 'white';
		};
		count++
		if (count>=aLi.length)
		{
			count=0
		}
		aLi[count].style.display = 'block';
		aNum[count].style.background = 'red';
		//console.log(count);
	};
	//上一张
	oPre.onclick = function(){
		for (var a=0;a<=aLi.length-1 ;a++ )
		{
			aLi[a].style.display = 'none';
			aNum[a].style.background = 'white';
		};
		count--
		if (count<0)
		{
			count=4
		}
		aLi[count].style.display = 'block';
		aNum[count].style.background = 'red';
	};
	//点击小数字 图片变化 批量监听
	for (var b=0;b<aNum.length ;b++ )
	{
		(function(m){
			
			aNum[m].onclick = function(){
				for (var a=0;a<=aLi.length-1 ;a++ )
				{
					aLi[a].style.display = 'none';
					aNum[a].style.background = 'white';
				};
				aLi[m].style.display = 'block';
				aNum[m].style.background = 'red';
				//console.log(m);
		}
		})(b);
		
	}
</script>
